<template>
  <div class="address_box">

    <div class="address_title">
      <i class="iconfont icon-zuojiantou" @click="$router.push({path:'/my'})"></i>
      <p>收货地址</p>
      <i class="iconfont icon-gengduo3"></i>
    </div>

    <div class="address_main" v-show="showList">
      <van-address-list
        v-model="chosenAddressId"
        :list="list"
        :disabled-list="disabledList"
        disabled-text="以下地址超出配送范围"
        default-tag-text="默认"
        @add="onAdd"
        @edit="onEdit"
        :switchable="true"
        @select="onSelect"
      />
    </div>

    <div class="edit_box" v-show="showList == false && showEdit == true">
      <van-address-edit
        :area-list="areaList"
        :show-delete="true"
        :show-area="true"
        :show-detail="true"
        show-set-default
        show-search-result
        :search-result="searchResult"
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onSave"
        @delete="onDelete"
        @change-detail="onChangeDetail"
        @change-default="onChangeCheck"
        ref="address_edit"
      />
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { areaList } from "@vant/area-data";
export default {
  data() {
    return {
      chosenAddressId: "1",
      list: [
        {
          id: "1",
          name: "张三",
          tel: "13000000000",
          address: "浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室",
          isDefault: true,
        },
        {
          id: "2",
          name: "李四",
          tel: "1310000000",
          address: "浙江省杭州市拱墅区莫干山路 50 号",
          isDefault: false,
        },
      ],
      disabledList: [
        {
          id: "3",
          name: "王五",
          tel: "xxx-xxx-xxx-xx",
          address: "NTB-火星  15 号",
        },
      ],
      searchResult: [],
      showList: true,   //是否显示收获地址列表组件
      showEdit: false,  //是否显示修改组件
      areaList,        
      editItem: "",   //存放修改的项
      eitIndex: null, //存放修改的下标
      ischecked: false,  //是否是默认
    };
  },
  methods: {
    // 添加地址
    onAdd() {
      // this.$router.push({ path: "/address/addAddress" });
      Toast("新增地址");
      this.showList = false;
      this.showEdit = true;
      console.log(this.$refs.address_edit);
    },
    // 编辑地址
    onEdit(item, index) {
      Toast("修改地址");
      this.editItem = item;
      this.eitIndex = index;
      this.showList = false;
      this.showEdit = true;
      this.$refs.address_edit.data.name = item.name;
      this.$refs.address_edit.data.tel = item.tel;
      this.$refs.address_edit.data.isDefault = item.isDefault;
      console.log(item, index);
      console.log(this.eitIndex);
      // console.log(this.$refs.address_edit);
      // this.$refs.address_edit.$children[0].value = item.name;
      // console.log(this.$refs.address_edit);
      // console.log(this.$refs.address_edit.$children[0]);
      // console.log(this.$refs.address_edit.$children[0].value);
    },
    // 保存
    onSave(val) {
      console.log(val);
      Toast("保存成功");
      let index = this.eitIndex;
      if (index == null) {
        this.list.push({
          id: Date.now(),
          name: val.name,
          tel: val.tel,
          address: val.province + val.city + val.county + val.addressDetail,
          isDefault: this.ischecked,
        });
      } else {
          this.list[index].id=Date.now();
          this.list[index].name= val.name;
          this.list[index].tel= val.tel;
          this.list[index].address= val.province + val.city + val.county + val.addressDetail;
          this.list[index].isDefault= this.ischecked;
      }
      this.showList = true;
      this.showEdit = false;
      // console.log(this.list);
      this.eitIndex = null;
      this.$refs.address_edit.data.name = "";
      this.$refs.address_edit.data.tel = "";
      this.$refs.address_edit.data.isDefault = "";
      // console.log(this.eitIndex);
      // console.log(this.ischecked);
    },
    // 删除地址
    onDelete() {
      Toast("删除成功");
      let index = this.eitIndex;
      this.list.splice(index,1);
      this.showList = true;
      this.showEdit = false;
      console.log(this.list);
      this.eitIndex = null;
      this.$refs.address_edit.data.name = "";
      this.$refs.address_edit.data.tel = "";
      this.$refs.address_edit.data.isDefault = "";
    },
    onChangeDetail(val) {
      console.log(val);
      if (val) {
        this.searchResult = [
          {
            name: "黄龙万科中心",
            address: "杭州市西湖区",
          },
        ];
      } else {
        this.searchResult = [];
      }
    },
    onChangeCheck(val) {
      // console.log(val);
      return (this.ischecked = val);
    },
    // changeDefalutCheck() {
    //   if(this.ischecked == true){
    //     console.log(isChecked);
    //   }
    // },
    // 选中跳转
    onSelect(item) {
      // console.log(item, index);
      this.$emit("change-address",item)
      console.log(item);
      this.$router.push( { path:'/orderForm'} )
    },
  },
  mounted() {
    window.addEventListener("beforeunload", window.scroll(0, 0));
  },
};
</script>

<style lang="less" scoped>
.address_box {
  position: relative;
}
.address_title {
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  padding: 0px 15px;
}
</style>